let setViewIdFlag = true
const { setEvent } = require("../../utils/index")
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    showData: {
      type: Object,
      value: {
        summary: {},
        feature: [],
        mien: [],
        trip: [],
        scenery: []
      }
    },
    showBtn: {
      type: Boolean,
      value: false,
      observer: function (newVal, oldVal, changedPath) {
        if (newVal == false) {
          this.setData({
            tabsFixed: newVal
          })
        }
      }
    }
  },

  observers: {
  },
  /**
   * 组件的初始数据
   */
  data: {
    tabs: ['特色亮点', '游船风采', '行程路线', '沿途风光'],

    viewId: '',
    windowHeight: 0,
    windowWidth: 0,
    tabTop: 0,
    viewIndex: 0,
    viewTop: [0, 0, 0, 0],
  },

  lifetimes: {
    attached: function () {
      const scope = this
      console.error(scope.data.showData)
      const { windowHeight, windowWidth } = wx.getSystemInfoSync()
      this.setData({
        windowHeight,
        windowWidth
      })
      setTimeout(function () {
        scope.getViewLocation()
      }, 1000)
    },
    detached: function () {
    },
    error: function () {
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    scrollFunc(e) {
      var scope = this
      var tabsFixed = false, showBtn = false;
      if (e.detail.scrollTop > this.data.tabTop) {
        tabsFixed = true
      } else {
        tabsFixed = false
      }
      if (e.detail.scrollTop < 20) {
        showBtn = false
      } else {
        showBtn = true
      }
      this.setData({
        tabsFixed: tabsFixed,
        showBtn: showBtn
      })
      if (!setViewIdFlag) {
        return
      }
      this.setViewIndex(e.detail.scrollTop + (100 / 375 * scope.data.windowWidth))
    },
    scrollList() {
      setEvent('列表页', 'LB18', '^游船彩页:[游船彩页]^立即预定:[立即预定]^')
      this.triggerEvent('scrolllist')
    },
    goView(e) {
      let viewId = e.currentTarget.dataset.index
      switch (viewId) {
        case '1':
          setEvent('列表页', 'LB14', '^游船彩页:游船彩页^特色亮点:特色亮点^')
          break;
        case '2':
          setEvent('列表页', 'LB15', '^游船彩页:游船彩页^游船风采:游船风采^')
          break;
        case '3':
          setEvent('列表页', 'LB16', '^游船彩页:游船彩页^行程路线:行程路线^')
          break;
        case '4':
          setEvent('列表页', 'LB17', '^游船彩页:游船彩页^沿途风光:沿途风光^')
          break;
      }
      setViewIdFlag = false
      setTimeout(function () {
        setViewIdFlag = true
      }, 500)
      this.setData({
        viewId: 'view' + (viewId || 1),
        viewIndex: viewId
      })
    },
    //滚动联动
    setViewIndex(scrollTop) {
      let scope = this
      let viewTop = scope.data.viewTop
      let viewIndex = scope.data.viewIndex
      if (scrollTop >= viewTop[3]) {
        scope.setData({
          viewIndex: 4
        })
        return
      }
      for (let index = 1; index < viewTop.length; index++) {
        if (scrollTop <= viewTop[index]) {
          viewIndex = index
          break
        }
      }
      scope.setData({
        viewIndex: viewIndex
      })
    },
    getViewLocation() {
      let viewTop = [0, 0, 0, 0]
      let tabTop = 0
      let scope = this
      this.createSelectorQuery().selectAll('.sightseeing-view').boundingClientRect(function (res) {
        res.forEach((item, index) => {
          viewTop[index] = item.top
        })
      }).exec(function () {
        scope.setData({
          viewTop
        })
      })
      this.createSelectorQuery().selectAll('.sightseeing-tabs').boundingClientRect(function (res) {
        tabTop = res[0].top
      }).exec(function () {
        scope.setData({
          tabTop
        })
      })
    }
  }
})
